<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        #canvas {
            width: 400px;
            margin: 10px;
            padding: 200px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="vue-app">
        <!-- 事件修饰符 once, prevent, stop
			注意点： v-on:click中间不能有空格
		-->
        <h1>Events</h1>
        <button @click="add(1)">长一岁</button>
        <button v-on:click.once="subtract(1)">减一岁(只能执行一次)</button>
        <button @dblclick="add(10)">长十岁</button>
        <button v-on:dblclick="subtract(10)">减十岁</button>
        <!-- @和v-on:都可以都相同 -->
        <p>This age is {{ age }}</p>
        <!-- 阻止a标签的功能不让其跳转 -->
        <a v-on:click.prevent="" href="https://www.baidu.com">www.baidu.com</a>
        <div id="canvas" @mousemove="updateXY">
            <p>offstXY: {{ offsetX }}, {{ offsetY }}</p>
            <p>clentXY: {{ clientX }}, {{ clientY }}</p>
            <p>pageXY: {{ pageX }}, {{ pageY }}</p>
            <p>screenXY: {{ screenX }}, {{ screenY }}</p>
            <span v-on:mousemove="stopMoving">stop Moving</span>
            <span v-on:mousemove.stop="">stop Moving</span>


        </div>
    </div>

    <!-- 键盘修饰符 -->
    <!--======================= 指令=================== -->
    <!-- vo-on:keyup.enter 只有用户按回车之后才会执行
		<input type="text" name="" v-on:keyup.enter="fn()">
		要用户按住alt之后再按enter键才会执行
		<input type="text" name="" v-on:keyup.alt.enter="fn()">
		============表达式==========
		====  v-if= ===

		<p v-if="seen"></p> 会根据seen的真假来插入/移除 <p> 元素
        表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，
        
        当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
        <p v-if="seen">现在你看到我了</p>
        这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
        
        ===========参数========

        v-on和v-bind后面的冒号表示参数，告知需要绑定的元素
        一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
        例如，v-bind 指令可以用于响应式地更新 HTML 特性：
        <a v-bind:href="url">...</a>
        在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
        另一个例子是 v-on 指令，它用于监听 DOM 事件：
        <a v-on:click="doSomething">...</a>
        在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

       ======== 修饰符 =====

        修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，
        用于指出一个指令应该以特殊方式绑定。例如，.prevent 
        修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
        <form v-on:submit.prevent="onSubmit">...</form>

        =====缩写=====

        ---- -v-bind 缩写----
        完整语法 
        <a v-bind:href="url">...</a>

        缩写 
        <a :href="url">...</a>

       --- v-on 缩写--------

        完整语法 
        <a v-on:click="doSomething">...</a>
        缩写
        <a @click="doSomething">...</a>
     -->
    <!-- ==============插值============ -->
    <!-- ------ v-html=  ------
        双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
        <p>Using mustaches: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
        Using mustaches: <span style="color: red">This should be red.</span>
        Using v-html directive: This should be red.
        这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

        -------------使用 JavaScript 表达式---------------

        迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。
        但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
        {{ number + 1 }}

        {{ ok ? 'YES' : 'NO' }}

        {{ message.split('').reverse().join('') }}

        <div v-bind:id="'list-' + id"></div>
        这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。
        有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
        这是语句，不是表达式
        {{ var a = 1 }}

        ----流控制也不会生效，请使用三元表达式 -----
        {{ if (ok) { return message } }}
        模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，
        如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。








      -->

    <script type="text/javascript" src="app.js"></script>
</body>

</html>